<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" th:href="@{../static/mysource/css/style.css}" type="text/css" media="all" />
    <!-- Style-CSS -->
    <link rel="stylesheet" th:href="@{../static/mysource/css/fontawesome-all.css}">
    <!-- Font-Awesome-Icons-CSS -->
    <!-- //css files -->
</head>

<body>
    <!-- bg effect -->
    <div id="bg">
        <canvas></canvas>
        <canvas></canvas>
        <canvas></canvas>
    </div>
    <!-- //bg effect -->
    <!-- title -->
    <h1>Online Vote</h1>
    <!-- //title -->
    <!-- content -->
    <div class="sub-main-w3">
        <form th:action="@{/login}" method="post">
            <h2>Register Now
                <i class="fas fa-level-down-alt"></i>
            </h2>
            <div class="form-style-agile">
                <label>
                    <i class="fas fa-user"></i>
                    邮箱
                </label>
                <input placeholder="Email" name="email" id="email" type="text" required="">
            </div>
            <div class="form-style-agile">
                <label>
                    <i class="fas fa-user"></i>
                    电话号码
                </label>
                <input placeholder="Telephone" name="telephone" id="telephone" type="text" required="">
            </div>
            <div class="form-style-agile">
                <label>
                    <i class="fas fa-user"></i>
                    用户名
                </label>
                <input placeholder="Username" name="username" id="username" type="text" required="">
            </div>
            <div class="form-style-agile">
                <label>
                    <i class="fas fa-unlock-alt"></i>
                    密码
                </label>
                <input placeholder="Password" name="Password"  id="password" type="password" required="">
            </div>

            <!-- //checkbox -->
            <input type="button" id="btn1"   value="注册">
        </form>
    </div>
    <!-- //content -->

    <!-- copyright -->

    <!-- //copyright -->

    <!-- Jquery -->
    <script th:src="@{../static/mysource/js/jquery-3.3.1.min.js}"></script>
    <!-- //Jquery -->

    <!-- effect js -->
    <script th:src="@{../static/mysource/js/canva_moving_effect.js}"></script>
    <!-- //effect js -->


    <script type="text/javascript">
        $(function (){
            $('#btn1').click(function (){
                // 使用JQuery发送一个ajax请求
                var email = $('#email').val();
                var phone = $('#telephone').val();
                var username = $('#username').val();
                var pwd = $('#password').val();


                $.ajax({
                    url:"/doRegister",
                    type:"post",
                    data:{"telephone":phone,"password":pwd,"email":email,"username":username},
                    success:function (data){
                        if (data.flag){
                            alert(data.msg)
                            location.href='/login';
                        }else {
                            location.reload()
                            alert(data.msg);
                        }

                    }
                })


            })
        })
    </script>

</body>

</html>